<template>
  <div id="user">
    <TopNavBar/>
    <div class="main-container">
    <div class="user-left-content">
        <SideNavBar>
        <div class="homepage" slot="one" :class="{active:currentIndex===index1}" @click="changeindex1"><img :src="require('assets/images/icons/'+img1+'.png')" alt=""> <span>个人主页</span> </div>
        <div class="course" slot="two" :class="{active:currentIndex===index2}" @click="changeindex2"><img :src="require('assets/images/icons/'+img2+'.png')" alt=""><span>我的课程</span></div>
        <div class="exam" slot="three" :class="{active:currentIndex===index3}" @click="changeindex3"><img :src="require('assets/images/icons/'+img3+'.png')" alt=""><span>考试系统</span></div>
        <div class="aidevelopment" slot="four" :class="{active:currentIndex===index4}" @click="changeindex4"><img :src="require('assets/images/icons/'+img4+'.png')" alt=""><span>AI研发中心</span></div>
        </SideNavBar>
    </div>
    <div class="user-right-content">
      <div class="user-right-top">{{topnav}}</div>
      <div class="user-right-bottom"><router-view/></div>
    </div>
    </div>
  </div>
</template>

<script lang="ts">
import { Component , Vue } from 'vue-property-decorator';
// import router from 'vue-router'
import router from '../../router/index'

@Component({
  name:'User',
  components:{
    TopNavBar:()=>import('../../components/common/topnavbar/TopNavBar.vue'),
    SideNavBar:()=>import('../../components/common/sidenavbar/SideNavBar.vue'),
    HomePage:()=>import('../homepage/HomePage.vue'),
    Exam:()=>import('../exam/Exam.vue'),
    Course:()=>import('../course/Course.vue'),
    Aidevelopment:()=>import('../aidevelopment/Aidevelopment.vue')
  }
})
export default class User extends Vue{
  topnav:string='个人主页';
  currentIndex:Number=-1;
  index1:Number=-1;
  index2:Number=0;
  index3:Number=0;
  index4:Number=0;
  img1:string="homepage_blue";
  img2:string='course_grey';
  img3:string='exam_grey';
  img4:string='ai_development_grey';

  changeindex1():void{
    this.img1='homepage_blue';
    this.img2='course_grey';
    this.img3='exam_grey';
    this.img4='ai_development_grey';
    this.index1=-1;
    this.index2=0;
    this.index3=0;
    this.index4=0;
    this.$router.push({path:'/homepage',name:'HomePage'});
  }
  changeindex2():void{
    this.img1='homepage_grey';
    this.img2='course_blue';
    this.img3='exam_grey';
    this.img4='ai_development_grey';
    this.index1=0;
    this.index2=-1;
    this.index3=0;
    this.index4=0;
    this.$router.push({path:'/course',name:'Course'});
  }
  changeindex3():void{
    this.img1="homepage_grey";
    this.img2='course_grey';
    this.img3='exam_blue';
    this.img4='ai_development_grey';
    this.index1=0;
    this.index2=0;
    this.index3=-1;
    this.index4=0;
    this.$router.push({path:'/exam',name:'Exam'});
  }
  changeindex4():void{
    this.img1="homepage_grey";
    this.img2='course_grey';
    this.img3='exam_grey';
    this.img4='ai_development_blue';
    this.index1=0;
    this.index2=0;
    this.index3=0;
    this.index4=-1;
    this.$router.push({path:'/aidevelopment',name:'Aidevelopment'});
  }
}
</script>

<style lang="less" >
#user{
  width: 100vw;
  background-color: #EEEEEE;
  .main-container{
    display: flex;
    margin-top: 1rem;
  .user-left-content{
    width: 12rem;
    height: 48.5rem;
    margin-left: 4rem;
    background-color: #fff;
    border-radius: .5rem;
    }
    .homepage,
    .course,
    .exam,
    .aidevelopment{
      width: 100%;
      height: 100%;
      border-left: 5px solid transparent;
    }
    .homepage:active,
    .course:active,
    .exam:active,
    .aidevelopment:active{
      color:#2d8cf0;
      font-weight: 700;
    }
    .active{
      border-left-color:#4DB2C8;
      color:#2d8cf0;
      font-weight: 700;
    }
    .user-right-content{
      width: 100%;
      margin-left: 1.5rem;
      margin-right: 4rem;
      .user-right-top{
        display: flex;
        align-items: center;
        width: 100%;
        height: 3.7rem;
        padding: 0.1rem 1.5rem;
        background-color: #fff;
        border-radius: 0.5rem;
        font-size: 1.3125rem;
        font-weight: 700;
        color:#2d8cf0;
      }
      .user-right-bottom{
        width: 100%;
        margin-top: 1.5rem;
      }
    }
  }
}
</style>